<template>
  <FPage :class="{'f-list-wrapper-bordered': bordered}">
    <template #header>
      <div class="f-search-wrapper" v-show="searchEnable">
        <el-input :placeholder="searchPlaceholder" v-model="searchText"
                  suffix-icon="search"/>
      </div>
    </template>

    <div class="f-list">
      <div v-for="(item, index) in searchedList" :key="item[keyName]"
           @click="() => selectItem(item)" @dblclick="() => dblclick(item)">
        <div :style="getItemStyle(index)"
             :class="{'f-list-item': true, 'selected-item': item[keyName] === selectedKey}">
          <el-text :class="{'selected-item': item[keyName] === selectedKey}"
                   class="f-list-item-text-wrapper"
                   truncated>
            <slot :item="item">
              <div class="f-list-item-text-wrapper">
                {{ getItemTitle(item) }}
              </div>
            </slot>
          </el-text>
        </div>
      </div>
    </div>
  </FPage>
</template>
<script setup>
import {mergeObject, real} from '@/utils/CommonUtils';
import {computed, shallowRef} from 'vue';
import FPage from '@/components/layout/FPage.vue';

const searchText = shallowRef();
const props = defineProps({
  itemStyle: {
    type: Object,
    default: () => {
    }
  },
  bordered: {
    type: Boolean,
    default: false
  },
  searchEnable: {
    type: Boolean,
    default: true
  },
  color: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'middle' // small, middle, large
  },
  searchPlaceholder: {
    type: String,
    default: '搜索'
  },
  keyName: {
    type: String,
    default: 'id'
  },
  titleName: {
    type: String,
    default: 'title'
  },
  selectedKey: {
    type: String,
    default: undefined
  },
  dataSource: {
    type: Array,
    default() {
      return [];
    }
  }
});
const emits = defineEmits(['doubleClick', 'select']);

function getItemTitle(item) {
  return item[props.titleName];
}

function getItemStyle(index) {
  let res = {marginTop: index === 0 ? '0' : '-1px'};
  if (props.size === 'small') {
    res.height = '20px';
  }
  if (props.color) {
    res.color = props.color;
  }
  if (props.itemStyle) {
    mergeObject(props.itemStyle, res);
  }
  return res;
}

function selectItem(item) {
  let key = props.keyName;
  if (props.selectedKey === item[key]) return;

  emits('select', item);
}

function dblclick(item) {
  let key = props.keyName;
  emits('doubleClick', item);
}

function match(value, searchText) {
  if (!searchText || searchText === '') return true;
  if (!value || value === '') return false;

  if (value.indexOf(searchText) !== -1) return true;
  return false;
}

function doSearch(list, searchText, titleName) {
  searchText = real(searchText);
  titleName = real(titleName);
  let res = [];
  if (!list) return res;
  for (let i = 0; i < list.length; i++) {
    let value = list[i][titleName];
    if (match(value, searchText)) {
      res.push(list[i]);
    }
  }
  return res;
}

const searchedList = computed(() => {
  let list = [...props.dataSource];
  let realSearchText = real(searchText);
  let titleName = props.titleName;
  return doSearch(list, realSearchText, titleName);
});

</script>
<script>
export default {
  name: 'FListV2'
};
</script>
<style>
.f-list-wrapper {
  position: relative;
  overflow: auto;
  height: calc(100% - 2px);
  border: 1px solid rgba(0, 0, 0, 0);
  background: white;
}

.f-list-wrapper-bordered {
  border-color: rgb(220, 223, 230);
  background: white;
}

.f-list-item {
  height: 35px;
  padding-left: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgb(24, 144, 255);
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0);
  border-radius: 2px;
  user-select: none;
  width: 100%;
}

.f-list-item:hover {
  border-color: #409EFF;
}

.f-search-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 15px;
  background: #ecf5ff;
}

.f-list {
  height: 100%;
  background: white;
  overflow: auto;
}

.selected-item {
  background: rgb(24, 144, 255);
  color: white !important;
}

.f-list-item .f-list-item-text-wrapper {
  padding-left: 5px;
}

.f-list-item .el-text,
.f-list-item .menu-list-item,
.f-list-item .f-list-item-text-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}


</style>
